import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Input, Pagination } from 'antd';
import styles from './index.module.less';

export default class Notice extends Component {
  state = {
    list: [
      {
        title: '地表径流减控 让城市降水不再来汹汹去匆匆',
        time: '2018年09月30日',
        content:
          '绿色保险是伴随20世纪70年代人类生态意识和可持续发展理念的觉醒而发展起来的，它最早是为规避因环境污染问题所造成的金融风险而提出的；90年代一系列自然灾害给民生经济带来重创，传统再保险市场受到严重冲击，巨灾衍生品开启保险嫁接资本市场的先河；进入21世纪，伴随人口激增与财富聚集......',
      },
      {
        title: '地表径流减控 让城市降水不再来汹汹去匆匆',
        time: '2018年09月30日',
        content:
          '绿色保险是伴随20世纪70年代人类生态意识和可持续发展理念的觉醒而发展起来的，它最早是为规避因环境污染问题所造成的金融风险而提出的；90年代一系列自然灾害给民生经济带来重创，传统再保险市场受到严重冲击，巨灾衍生品开启保险嫁接资本市场的先河；进入21世纪，伴随人口激增与财富聚集......',
      },
      {
        title: '地表径流减控 让城市降水不再来汹汹去匆匆',
        time: '2018年09月30日',
        content:
          '绿色保险是伴随20世纪70年代人类生态意识和可持续发展理念的觉醒而发展起来的，它最早是为规避因环境污染问题所造成的金融风险而提出的；90年代一系列自然灾害给民生经济带来重创，传统再保险市场受到严重冲击，巨灾衍生品开启保险嫁接资本市场的先河；进入21世纪，伴随人口激增与财富聚集......',
      },
      {
        title: '地表径流减控 让城市降水不再来汹汹去匆匆',
        time: '2018年09月30日',
        content:
          '绿色保险是伴随20世纪70年代人类生态意识和可持续发展理念的觉醒而发展起来的，它最早是为规避因环境污染问题所造成的金融风险而提出的；90年代一系列自然灾害给民生经济带来重创，传统再保险市场受到严重冲击，巨灾衍生品开启保险嫁接资本市场的先河；进入21世纪，伴随人口激增与财富聚集......',
      },
    ],
  };

  onSearch = value => {
    this.props.history.push({ path: '/notice', query: { key: value } });
  };

  onChange = pageNumber => {
    console.log('Page: ', pageNumber);
  };

  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
  };

  render() {
    const { location } = this.props;
    const { query } = location;
    const { list } = this.state;

    return (
      <div className={styles.container}>
        <div className={styles.ui_notice}>
          <div className={styles.search}>
            <Input.Search
              placeholder="请输入关键词"
              enterButton=" 搜 索 "
              size="large"
              onSearch={this.onSearch}
            />
          </div>
          {query && query.key && query.key === 'null' ? (
            <div className={styles.no_list}>
              <p className={styles.title}>非常抱歉，没有符合条件的搜索结果！</p>
              <Link className={styles.back} to="/notice">
                返回上一页&gt;&gt;
              </Link>
            </div>
          ) : (
            <div className={styles.notice_box}>
              <div className={styles.top}>
                {query && query.key ? `"${query.key}"相关的公告` : '最新公告'}
              </div>
              <div className={styles.list}>
                {list.map((e, i) => {
                  return (
                    <div className={styles.box} key={i}>
                      <div className={styles.title}>
                        {e.title}
                        <span>{e.time}</span>
                      </div>
                      <div className={styles.content}>{e.content}</div>
                    </div>
                  );
                })}
              </div>
              <div className={`${styles.clearfix} ${styles.page_pagination}`}>
                <Pagination
                  className={styles.pagination}
                  showQuickJumper
                  showSizeChanger
                  onShowSizeChange={this.onShowSizeChange}
                  defaultCurrent={2}
                  total={500}
                  pageSize={10}
                  showTotal={(total, range) =>
                    `当前页 ${range[1] - range[1]}条记录，共${total}条`
                  }
                  onChange={this.onChange}
                />
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
